<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
        <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="showEditCard"
        >更改个人信息
        </el-button
        >
      </div>
      <!--头像区域-->
      <!--      <div class="avatar_box">-->
      <!--        <img src="../assets/logo.png" alt="" />-->
      <!--      </div>-->
      <!--      <br />-->
      <!-- 个人信息区域 -->
      <div class="Info">
        <div>用户名：{{ updateForm.username }}</div>
        <div>昵称：{{ updateForm.nickName }}</div>
        <div>性别：{{ updateForm.sex }}</div>
        <div>手机号：{{ updateForm.phone }}</div>
        <!--        <div>密码：{{updateForm.password}}</div>-->
        <div>用户邮箱：{{ updateForm.email }}</div>
        <div>状态：{{ updateForm.status }}</div>
        <div>等级：{{ updateForm.rank }}</div>
        <div>修改人：{{ updateForm.updateUser }}</div>
        <div>修改时间：{{ updateForm.createTime }}</div>
        <div>创建人：{{ updateForm.createUser }}</div>
        <div>创建时间：{{ updateForm.createTime }}</div>
      </div>
    </el-card>
    <!-- 两个卡片之间的分割线 -->
    <hr/>
    <!-- 卡片隐藏时的背景图片 -->
    <!--    <img src="../assets/bg.png" class="bg" id="bg" />-->
    <!-- 修改用户信息卡片 -->
    <el-card class="edit-card" v-if="show">
      <div slot="header" class="clearfix">
        <span>修改信息</span>
        <el-button
            icon="el-icon-close"
            circle
            style="float: right; margin: -8px 0; border: none"
            @click="hideEditCard"
        ></el-button>
      </div>
      <!-- 提交修改信息的表单 -->
      <el-form :label-position="'top'" label-width="80px" ref="updateRef" :model="updateForm" :rules="updateRules">
        <!--        <el-form-item label="用户ID" prop="user_id">-->
        <!--          <el-input v-model="updateForm.user_id" readonly></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="updateForm.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="updateForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="userInfo.sex" :label="1">男</el-radio>
          <el-radio v-model="userInfo.sex" :label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="updateForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="updateForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="updateForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="float: right" @click="update"
          >提交
          </el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    //邮箱验证正则表达式
    var checkEmail = (rule, value, cb) => {
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb();
      }
      cb(new Error(""));
    };
    return {
      userInfo: {
        userName: '',
        sex: 1,
        nickName: '',
        phone: '',
        email: '',
        status: 1,
        password:'',
        rank: 2,
        createTime: '',
        updateTime: '',
        createUser: '',
        updateUser: ''
      },
      updateForm: {
        username: '',
        sex: '',
        nickName: '',
        phone: '',
        email: '',
        status: '',
        password:'',
        rank: '',
        createTime: '',
        updateTime: '',
        createUserName: '',
        updateUserName: ''
      },
      //控制修改卡片的是否显示
      show: false,
      updateRules: {
        // 验证用户名是否合法
        username: [
          {required: true, message: "请输入登录名称", trigger: "blur"},
          {
            min: 3,
            max: 10,
            message: "长度在三到十个字符之间",
            trigger: "blur",
          },
        ],
        //昵称验证
        nickName: [{required: true, message: '请输入登录昵称', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在一到十个字符之间', trigger: 'blur'}],
        //手机号验证
        phone: [{required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '长度为11位', trigger: 'blur'}],
        // 验证密码是否合法
        // password: [{required: true, message: '请输入登录密码', trigger: 'blur'},
        //   {min: 6, max: 15, message: '长度在六到十五个字符之间', trigger: 'blur'}],
        //验证邮箱是否合法
        email: [
          {required: true, message: "请输入邮箱地址", trigger: "blur"},
          {
            validator: checkEmail,
            message: "请输入正确的邮箱地址",
            trigger: "blur",
          },
        ]
      },
    };
  },
  //页面创建时执行
  created() {
    this.getUserInfo();
  },
  methods: {
    //获取用户信息,并填充到修改表单中
    async getUserInfo() {
      // this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
      const {data: res} = await this.$http.get("/employee/info");
      if (res.code === 0) {
        return this.$message.error("获取个人信息失败");
      }
      this.userInfo = res.data;
      this.updateForm.username = this.userInfo.userName;
      this.updateForm.email = this.userInfo.email;
      this.updateForm.sex = this.userInfo.sex === 1 ? '男' : '女';
      this.updateForm.phone = this.userInfo.phone;
      this.updateForm.nickName = this.userInfo.nickName;
      // this.updateForm.password=this.userInfo.password;
      this.updateForm.status = this.userInfo.status === 1 ? '在线' : '冻结';
      switch (this.userInfo.rank) {
        case 0:
          this.updateForm.rank = '超级管理员';
          break;
        case 1:
          this.updateForm.rank = '管理员';
          break;
        case 2:
          this.updateForm.rank = '普通用户';
          break;
      }
      this.updateForm.createTime = this.userInfo.createTime;
      this.updateForm.updateTime = this.userInfo.updateTime;
      this.updateForm.createUser = this.userInfo.createUserName===null?this.userInfo.userName:this.userInfo.createUserName;
      this.updateForm.updateUser = this.userInfo.updateUserName===null?this.userInfo.userName:this.userInfo.updateUserName;
    },
    //控制修改卡片显示
    showEditCard() {
      this.show = true;
      // document.getElementById("bg").style.display = "none";
    },
    //控制修改卡片隐藏
    hideEditCard() {
      this.show = false;
      // document.getElementById("bg").style.display = "flex";
    },
    //提交修改信息
    update() {
      //因为表单中包含只读数据，需要手动搭建请求体
      const requestBody = {
        userName: this.updateForm.username,
        nickName: this.updateForm.nickName,
        sex: this.userInfo.sex,
        phone: this.updateForm.phone,
        password: this.updateForm.password,
        email: this.updateForm.email

      }
      this.$refs.updateRef.validate(async valid => {
        if (!valid) return false
        const {data: res} = await this.$http.put('/employee/update', requestBody)
        if (res.code !== 1) return this.$message.error("修改失败!用户名已存在")
        this.$message.success("修改成功!请重新登录")
        this.$router.push('/login')
      })
    },
  },
};
</script>

<style lang="less" scoped>
.avatar_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
}

.Info {
  div {
    margin-top: 15px;
  }
}

//.bg {
//  display: flex;
//  position: relative;
//  width: 300px;
//  height: 300px;
//  top: 63px;
//  left: 79%;
//}
</style>